<template>
    <div class="goodsinfo-container">
        <!-- 购物车小球 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show='ballFlag' ref="ball"></div>    
        </transition>
        <!-- 缩略图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :lunboList='thumlist'></swipe>
                </div>
            </div>
        </div>
        <!-- 购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        市场价：<span class="market_price">￥{{goodsinfo.market_price}}</span>&nbsp;&nbsp;
                        销售价：<span class="shop_price">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <p>购买数量：<numbox @getcount="getsoncount" :max = goodsinfo.stock_quantity></numbox></p>
                    <p>
                        <mt-button type='primary' size='small'>立即购买</mt-button> &nbsp;&nbsp;
                        <mt-button type='danger' size='small' @click='addToCart'>加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况： {{goodsinfo.stock_quantity}} 件</p>
                    <p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>

                </div>
            </div>
            <div class="mui-card-footer">
                <button class="mut-btn mui-btn-primary mui-btn-block mui-btn-outlined" type="button" @click="desc()">图文介绍</button>
                <button class="mut-btn mui-btn-danger mui-btn-block mui-btn-outlined" type="button" @click="comment()">商品评论</button>
            </div>
        </div>

    </div>
</template>
<script>
import {Toast} from "mint-ui"
import swipe from '../subcomponents/Swipe.vue'
import numbox from '../subcomponents/Numbox.vue'
export default{
    data(){
        return{
            id:this.$route.params.id,
            thumlist:[],
            goodsinfo:{},
            ballFlag:false,
            transX:0,
            transY:0,
            count:1,
        }
    },
    created(){
        this.getthumimages()
        this.getinfo()
    },
    methods:{
        getthumimages(){
            this.$http.get('api/getthumimages/'+this.id).then(
                response=>{
                    if(response.body.status==0){
                        response.body.message.forEach(item=>{
                            item.img_url = item.src
                        })

                        this.thumlist = response.body.message
                        Toast({message:"获取本详情ok",duration:500})
                    }
                })},
        getinfo(){
            this.$http.get('api/goods/getinfo/'+this.id).then(
                response=>{
                    if(response.body.status==0){
                        this.goodsinfo = response.body.message[0]
                        Toast({message:"获取本详情ok",duration:500})
                    }
                })
        },
        desc(){
            this.$router.push({ name: 'goodsdesc' ,params:{ id : this.id }})
        },
        comment(){
            this.$router.push({name:'goodscomment',params:{ id : this.id }})
        },
        addToCart(){
            this.ballFlag = !this.ballFlag
            this.$store.commit("getcardata",{id:this.id,count:this.count,sell_price:parseFloat(this.goodsinfo.sell_price),selected:true})

        },
        beforeEnter(el){
            el.style.transform ="translate(0,0)"
        },
        enter(el,done){
            el.offsetWidth

            var ball  =  this.$refs.ball.getBoundingClientRect()
            var badge  =  document.getElementById("badge").getBoundingClientRect()
            this.transX = badge.left - ball.left 
            this.transY = badge.top - ball.top 
        
            el.style.transform =`translate(${this.transX}px,${this.transY}px)`
            el.style.transition = "all 0.2s cubic-bezier(.24,-0.29,.96,.63)"
            done()
        },
        afterEnter(el){
            this.ballFlag=!this.ballFlag
        },
        getsoncount(count){
            this.count = count
            console.log("拿到儿子的数据咯"+ this.count)
        }
    },
    components:{
        swipe,
        numbox
    }
}
</script>
<style lang="scss" scoped>
.goodsinfo-container{
    background-color:#eee;
    overflow: hidden;
    .mui-card-footer{
        flex-direction:column;
    }
    .mui-btn-block{
        padding:5px 0;
    }
    .mui-card-content-inner{
        p{
            padding:2px 0 ;
            .market_price{
                font-size:12px;
                text-decoration:line-through;
            }
            .shop_price{
                font-size:14px;
                font-weight: 600;
                color:#f00;
            }
        }
    }
    .ball{
        width:15px;
        height:15px;
        background-color:#f00;
        border-radius:50%;
        position:absolute;
        //加入购物车起点
        top:396px;
        left:149px;
        z-index:99;
        // transform:translate(89px,225px);//购物车落点
    }
}

</style>
